<template>
  <el-card>
    <!-- 面包屑 -->
    <template #header>
      <el-breadcrumb separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      </el-breadcrumb>
    </template>

    <!-- 将表格用卡片包裹会更美观 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="comment_id"
        label="序号"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="user_name"
        label="用户名"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="comment_date"
        label="评论时间"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="comment_content"
        label="评论内容"
        width="120"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button
            @click="handleDelete(scope.$index, scope.row)"
            type="danger"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    /> -->
  </el-card>
</template>

<script>
import axios from 'axios'
import { onMounted, reactive, toRefs } from 'vue'
import { ElMessageBox, ElNotification } from 'element-plus'
// 已经在main.js中引入了全局的环境变量,所以这里就不用再写完整的地址了

function loadData(state) {
  // const params = {
  //   page: state.currentPage,
  //   size: state.pageSize,
  // }
  axios.get('/comment').then((res) => {
    //console.log(res.data.result)
    state.tableData = res.data.result
  })
}

// 删除评论
function useDelete(state) {
  const handleDelete = (index, row) => {
    // console.log(index, row)
    ElMessageBox.confirm('确定要删除该评论吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      callback: (action) => {
        //判断点击的是确定还是取消,并给出反应
        if (action === 'confirm') {
          //console.log(row.comment_id)
          axios.delete(`/comment/${row.comment_id}`).then((res) => {
            console.log(res.data.message)
            // 刷新页面
            if (res.data.message === '删除评论成功') {
              ElNotification({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000,
              })
              // duration: 2000, 定时消失
              loadData(state)
            } else {
              ElNotification({
                title: '失败',
                message: '删除失败',
                type: 'error',
                duration: 2000,
              })
            }
          })
        }
      },
    })
  }
  return {
    handleDelete,
  }
}
export default {
  setup() {
    const state = reactive({
      tableData: [],
      // total: 0,
      // currentPage: 1,
      // pageSize: 4,
      //CategoryId: 0, //要编辑的分类的编号
    })
    const url = import.meta.env.VITE_APP_URL
    onMounted(() => {
      loadData(state)
    })

    // 没有使用setup语法糖的话一定要写返回值
    return {
      // toRefs获取响应式数据
      ...toRefs(state),
      url,
      ...useDelete(state),
    }
  },
}
</script>
